<template>
  <div class="theme-switcher">
    <el-switch
      v-model="isDarkMode"
      inline-prompt
      :active-icon="Moon"
      :inactive-icon="Sunny"
      size="default"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useTheme } from "@/composables/useTheme";
import { Sunny, Moon } from "@element-plus/icons-vue";

const { isDark, setTheme } = useTheme();

const isDarkMode = computed({
  get: () => isDark.value,
  set: (value: boolean) => {
    setTheme(value ? 'dark' : 'light');
  }
});
</script>

<style lang="scss" scoped>
.theme-switcher {
  display: flex;
  align-items: center;
}

.el-switch {
  --el-switch-on-color: var(--el-color-primary);
  --el-switch-off-color: var(--el-color-warning);
}
</style>
